<template>
    <!-- 登录页面图片 -->
    <div class="box1">
        <img src="../../static/images/login01.png" alt="喜马拉雅">
    </div>
    <div>
        <van-tabs line-width="100px" line-height="1px" color="orangered" title-active-color="orangered">
            <van-tab title="密码登录"></van-tab>
            <van-tab title="验证码登录"></van-tab>
        </van-tabs>
    </div>
    <van-cell-group class="box2" inset>
        <!-- 输入手机号-->
        <van-field class="tel" label-width="60px" v-model="loginParams.phone" type="tel" label="手机号:"
            placeholder="请输入手机号" />
        <!-- 输入密码 -->
        <van-field class="password" label-width="60px" v-model="loginParams.password" type="password" label="密码:"
            placeholder="请输入密码" />
    </van-cell-group>
    <!-- 登录按钮 -->
    <van-button class="login_btn" :color="btnColor" @click="toLoginHandler">登录</van-button>
    <!-- 同意条款 -->
    <div class="agree">
        <van-checkbox-group shape="square" v-model="checked" @change="checkedHandler">
            <van-checkbox name="a"></van-checkbox>
        </van-checkbox-group>
        <span>首次登录会自动创建新账号，且代表同意<a href="javascript:;">《用户服务协议》</a>和<a href="javascript:;">《隐私政策》</a></span>
    </div>
    <!-- 其他登录方式 -->
    <div class="footer">
        <van-divider :style="{ color: '#999999', borderColor: '#999999', padding: '0 30px' }">
            其他登录方式
        </van-divider>
        <div class="flex_box" flex>
            <svg t="1691113738002" class="icon1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="6893" width="30" height="30">
                <path
                    d="M666.122449 909.061224c-10.44898 0-21.420408-1.044898-31.869388-2.612244-39.183673-4.702041-74.710204-23.510204-100.832653-53.289796-13.583673 5.22449-28.212245 5.22449-41.795918 0-21.420408 28.212245-61.64898 48.065306-108.669388 53.289796-66.35102 7.314286-138.44898-11.493878-144.718367-55.379592-5.22449-34.481633 37.093878-61.126531 81.502041-75.755102-25.6-28.212245-43.363265-63.738776-51.2-101.355102l-0.522449 0.522449c-25.077551 31.346939-41.795918 50.155102-61.126531 50.155102-2.089796 0-4.179592-0.522449-6.269388-1.044898-7.314286-2.612245-13.061224-8.881633-17.240816-18.808164-16.195918-34.481633-9.404082-100.310204 15.15102-150.465306 0 0 0-0.522449 0.522449-0.522449 12.538776-22.465306 27.689796-43.363265 45.453061-62.171428-6.269388-11.493878-10.44898-24.032653-12.016326-37.093878v-3.134694c0.522449-19.330612 10.44898-37.093878 26.644898-47.542857-10.971429-73.142857 9.926531-147.330612 58.514286-203.232653 49.110204-56.946939 120.163265-88.816327 194.873469-86.204081h4.702041c65.306122 0 129.567347 26.122449 177.110204 72.097959 49.110204 47.542857 76.8 112.326531 77.844898 180.767347v7.314285c0.522449 9.926531 0 19.330612-1.044898 29.257143 14.106122 8.881633 21.420408 20.37551 21.420408 48.065306 0 13.583673-1.044898 27.689796-9.926531 36.04898 13.061224 17.763265 28.734694 42.840816 41.27347 62.693877l2.612245 4.179592c20.37551 32.391837 23.510204 74.187755 22.987755 96.130613 0 17.240816-2.089796 58.514286-18.285714 70.530612-3.657143 2.612245-7.314286 3.657143-12.016327 3.657143h-4.179592c-26.122449 0-41.273469-23.510204-57.991837-48.587755l-1.567347-2.089796c-8.881633 36.571429-26.122449 71.053061-50.677551 99.265306 27.167347 9.404082 83.069388 31.346939 75.755103 73.142857-5.746939 35.526531-55.902041 62.171429-114.416327 62.171428z m-388.702041-63.738775z m250.253061-11.493878z m276.375511-140.016326z m-47.020409-235.102041z"
                    fill="#7BD4EF" p-id="6894"></path>
            </svg>
            <svg t="1691113617840" class="icon2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="5926" width="30" height="30">
                <path
                    d="M401.136175 476.090182c-167.866182 7.749818-303.010909 97.605818-303.01091 209.524363 0 111.941818 135.726545 195.863273 303.01091 188.113455 167.889455-7.749818 303.616-112.500364 303.616-224.442182 0-111.872-135.726545-180.945455-303.616-173.195636z m114.315636 281.576727c-51.2 66.071273-152.994909 98.816-251.810909 45.242182-47.034182-25.6-45.242182-75.589818-45.242182-75.589818s-19.642182-157.765818 149.434182-177.408c169.053091-19.642182 199.400727 141.684364 147.618909 207.755636z m-113.105455-105.960727c-10.728727 7.726545-13.102545 22.621091-7.144727 32.139636 5.352727 9.495273 19.060364 10.705455 29.160727 2.978909 10.728727-8.331636 14.266182-22.621091 8.913455-32.139636-5.329455-9.518545-18.432-11.915636-30.929455-2.978909z m-79.778909 22.016c-31.557818 2.978909-54.178909 30.952727-54.178909 57.157818 0 26.181818 25.623273 44.637091 56.576 41.053091 31.534545-3.560727 57.134545-27.973818 57.134546-54.155636 0-26.786909-23.202909-47.616-59.531637-44.055273z m532.200728 49.408c-69.050182 147.060364-297.053091 218.484364-466.106182 204.8C227.917265 915.409455 21.953629 861.858909 0.519447 667.764364c0 0-11.310545-88.110545 73.797818-201.797819 0 0 122.624-171.450182 265.495273-220.276363 142.871273-48.826182 159.534545 33.931636 159.534546 82.152727-7.726545 41.076364-22.016 65.466182 31.557818 48.826182 0 0 140.497455-64.907636 198.237091-7.144727 46.429091 46.429091 7.749818 110.731636 7.749818 110.731636s-19.037091 21.434182 20.247273 29.160727c41.076364 8.936727 166.679273 66.676364 97.629091 213.713455z m-138.682182-405.410909a27.275636 27.275636 0 0 1-27.392-27.368728c0-15.499636 12.497455-27.997091 27.392-27.99709 0 0 172.055273-31.557818 151.761454 153.6 0 1.186909 0 1.792-0.558545 2.978909a27.461818 27.461818 0 0 1-26.786909 23.202909c-15.476364 0-27.973818-12.520727-27.973818-27.392-0.023273-0.558545 27.368727-124.369455-96.442182-97.024z m291.677091 148.247272c-4.747636 31.534545-20.247273 33.931636-38.702546 33.931637-22.016 0-39.866182-13.684364-39.866182-36.328727 0-19.037091 7.749818-38.702545 7.749819-38.702546 2.373818-8.331636 20.829091-58.344727-12.520728-133.329454-61.323636-102.981818-184.529455-104.192-199.424-98.816-14.871273 5.957818-36.305455 8.936727-36.305454 8.936727a40.029091 40.029091 0 0 1-39.889455-40.494546c0-18.455273 12.497455-33.931636 29.160727-38.679272 0 0 0.605091-0.605091 1.18691-0.605091 1.186909 0 2.397091-1.210182 3.584-1.815273 17.268364-3.537455 78.568727-15.453091 138.123636-1.163636 105.937455 24.436364 252.392727 127.394909 186.903273 347.066181z m0 0"
                    fill="#D81E06" p-id="5927"></path>
            </svg>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, toRaw } from "vue";
import { LOGIN } from "@/type/paramsType/parmsType";
import reminder from "@/utils/reminder";
import UserRequest from "@/api/user";
import actionToken from "@/tools/actionToken";
import useUserStore from "@/store/user";//引入仓库函数
import { useRouter } from "vue-router";
import { verifyPhone } from "@/tools/verifyRule";

// 获取仓库
const user_store = useUserStore();
// 获取路由器对象
const router = useRouter();
// 为了切换按钮的颜色
const btnColor = ref<string>("#454545");
// 收集单选框的勾选值
const checked = ref<any[]>([]);
const loginParams = reactive<LOGIN>({
    phone: "",
    password: ""
});
// 发请求用户登录
async function forToLogin(params: LOGIN) {
    try {
        let result = await UserRequest.userLogin(params);
        // 将token保存在本地存储中
        actionToken.saveToken(result.token);
        // 调用action根据token获取用户的详细信息
        user_store.getUserDetailInfo();
        // 路由跳转到首页
        router.replace("/");
    } catch (error: any) {
        reminder(error || "网络连接异常")
    }
}

// 点击`登录`按钮的处理函数
const toLoginHandler = () => {
    if (!checked.value.length) return reminder("请您确认用户协议", false);
    let params = toRaw(loginParams);
    for (let k in params) {
        let val = params[k].trim();
        let keyName = k === 'phone' ? '手机号' : '密码'
        if (val.includes(" ")) return reminder(`${keyName}包含无效的空格`);
        if (k === "phone" && !verifyPhone.test(val)) {
            return reminder(`${keyName}格式不正确`);
        }
        if (!val) {
            return reminder(`${keyName}为必填项`, false);
        }
    }
    forToLogin(params);
}

// 勾选用户协议的处理函数
const checkedHandler = (val: any) => {
    console.log(val);
    btnColor.value = val.length ? "#d81e06" : "#454545"
    // if(val.length)
}

</script>
<script lang="ts">

</script>

<style scoped lang="less">
.box1 {
    img {
        width: 60%;
        height: auto;
    }

    text-align: center;
    margin: 30px auto;
}

.box2 {
    width: 70%;
    margin: 0 auto;
    text-align: center;
    // vertical-align: middle;
}

.login_btn {
    width: 80%;
    height: 48px;
    font-size: 16px;
    border-radius: 20px;
    border: none;
    display: block;
    margin: 40px auto;
    padding: 12px 0;

}

.agree {
    width: 80%;
    height: 30px;
    display: flex;
    align-items: flex-start;
    font-size: 14px;
    color: #999999;
    margin: 20px auto 0;
    white-space: wrap;

    .radio {
        margin-top: 2px;
    }

    span {
        text-align: center;

        a {
            color: orangered;
        }
    }
}

.footer {
    margin-top: 100px;
    text-align: center;

    .flex_box {
        width: 50%;
        margin: 20px auto;

        .icon1 {
            float: left;
        }

        .icon2 {
            float: right;
        }
    }
}
</style>
